import QtQuick 2.2
import QtQuick.Controls 1.4
import QtQuick.Layouts 1.1
import "../mainmenu"

Rectangle {

    MainmenuItem{ id: label
        imagepath: qsTr("../../images/hotedit.png")
        content: qsTr("任务")
        height: 30
        anchors{
            top: parent.top; left: parent.left; right: parent.right
        }
    }

    Rectangle{ id: menu
        height: 50
        color: "gray"
        anchors{
            bottom: parent.bottom; left: parent.left; right: parent.right
        }
    }

    //中间布局
    Rectangle{ id: main
        //color: "blue"
        //水平布局
        Row{
            GroupBox{
                id: setTarget
                title: qsTr("设定的目标")
                width: main.width*3/5; height: main.height
            }

            //水平布局的右边是一个垂直布局
            Column{
                width: main.width*2/5
                GroupBox{
                    id: selectTarget
                    title: qsTr("选定目标")
                    width: main.width*2/5; height: main.height*5/6;
                    ListView{
                        id: listview
                        model: targetmodel; delegate: targetdelegate; header: targetheader
                        anchors.fill: parent
                    }
                }

                Button{
                    id: adjustTarget
                    text: "<< 调节目标"
                    width: main.width*2/5; height: main.height/6
                }
            }

        }

        anchors{
            left: parent.left; right: parent.right; top: label.bottom; bottom: menu.top
            topMargin: 15
        }
    }

    //listmodel 和 listdelegate
        ListModel{
            id: targetmodel
        }

        Component{
            id: targetdelegate
            Item{
                id: wrapper
                width: parent.width; height: 30
                MouseArea{
                    anchors.fill: parent
                    onClicked: wrapper.ListView.view.currentIndex = index
                }

                RowLayout{
                    anchors.left: parent.left; anchors.verticalCenter: parent.verticalCenter
                    spacing: 8
                    Text{
                        text: target
                        color: wrapper.ListView.isCurrentItem ? "red":"black"
                        font.pixelSize: wrapper.ListView.isCurrentItem?15:12
                        Layout.preferredWidth: listview.width*2/3
                    }
                    Text{
                        text: compensation
                        color: wrapper.ListView.isCurrentItem ? "red":"black"
                        font.pixelSize: wrapper.ListView.isCurrentItem?15:12
                        Layout.preferredWidth: listview.width/3
                    }
                }
            }
        }

        Component{
            id: targetheader
            Item{
                width: parent.width; height: 35
                RowLayout{
                    anchors.left: parent.left; anchors.verticalCenter: parent.verticalCenter; spacing: 8
                    Text {
                        text: qsTr("目标")
                        font.bold: true
                        font.pixelSize: 20
                        Layout.preferredWidth: listview.width*2/3
                    }
                    Text {
                        text: qsTr("补偿")
                        font.bold: true
                        font.pixelSize: 20
                        Layout.preferredWidth: listview.width/3
                    }
                }
            }
        }

}
